<template>
    <div style="width: 100%; height: 100%;" ref="xe2Container"></div>
    <div class="header">
        <select @change="switchOnlineImage($event)">
            <option selected value="https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}">谷歌影像</option>
            <option value="https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}">高德影像</option>
            <option
                value="https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}">
                arcgis影像</option>
        </select>

        <div class="mode">
            <button @click="createESLocationMeasurement()">点位测量</button>
            <button @click="createESDistanceMeasurement()">距离测量</button>
            <button @click="createESHeightMeasurement()">高度测量</button>
            <button @click="createESAreaMeasurement()">面积测量</button>
            <button @click="createESDirectionMeasurement()">方位角测量</button>
            <button @click="destroyMeasurement()">清除测量</button>
        </div>

        <div class="mode">
            <select name="" id="" @change="createESPolygonFence($event)">
                <option value="danger">围栏样式1</option>
                <option value="checkerboard">围栏样式2</option>
                <option value="warning">围栏样式3</option>
                <option value="cord">围栏样式4</option>
                <option value="scanline">围栏样式5</option>
                <option selected value="honeycomb">围栏样式6</option>
            </select>

            <select name="" id="" @change="createESPipeFence($event)">
                <option value="purple">管道围栏1</option>
                <option selected value="blue">管道围栏2</option>
            </select>

            <select name="" id="" @change="createESPath($event)">
                <option value="purple">紫色路径</option>
                <option selected value="blue">蓝色路径</option>
            </select>

            <select name="" id="" @change="createESAlarm($event)">
                <option value="cylinder">柱状警告</option>
                <option selected value="circle">圆形警告</option>
            </select>

            <select name="" id="" @change="createESHuman($event)">
                <option value="worker">工人</option>
                <option selected value="police">警察</option>
                <option selected value="pedestrian">路人</option>
            </select>
            <label for="">人员跟随</label> <input type="checkbox" v-model="follow">
        </div>

        <div class="mode">
            <button @click="createESImageLabel()">图片标签</button>
            <button @click="cerateESGeoPolygon()">贴地多边形</button>
            <button @click="createESApertureEffect()">光圈特效</button>

            <button @click="createESUnrealActor()">自定义Actor火苗</button>
            <button @click="OffsetZ">火苗上升</button>
        </div>

        <select name="" id="" @change="createESPoi3D($event)">
            <option value="triangle">3Dpoi三角形</option>
            <option selected value="diamond">3Dpoi菱形</option>
        </select>

        <select name="" id="" @change="createESPoi2D($event)">
            <option value="CircularH01">2Dpoi样式1</option>
            <option value="SquareH01">2Dpoi样式2</option>
            <option value="SquareH02">2Dpoi样式3</option>
            <option value="SquareV01">2Dpoi样式4</option>
            <option value="SquareV02">2Dpoi样式5</option>
            <option value="SquareV04">2Dpoi样式6</option>
            <option value="Flag01">2Dpoi样式7</option>
            <option value="Flag02">2Dpoi样式8</option>
            <option value="Linear02">2Dpoi样式9</option>
            <option value="Linear03">2Dpoi样式10</option>
            <option value="CircularV01">2Dpoi样式11</option>
            <option value="CircularV02">2Dpoi样式12</option>
            <option value="CircularV03">2Dpoi样式13</option>
            <option value="CircularV04">2Dpoi样式14</option>
            <option value="CircularV05">2Dpoi样式15</option>

            <option value="P3D01">2Dpoi样式16</option>
            <option value="P3D02">2Dpoi样式17</option>
            <option value="P3D03">2Dpoi样式18</option>
            <option value="P3D04">2Dpoi样式19</option>
            <option value="P3D05">2Dpoi样式20</option>
            <option value="P3D06">2Dpoi样式21</option>
            <option selected value="P3D07">2Dpoi样式22</option>
        </select>
    </div>

    <div class="switch">
        <button @click="switchCesiumViewer">切换Cesium视口</button>
        <button @click="switchUEViewer">切换UE视口</button>
        <button
            @click="flyIn([114.79363796074749, 21.777714823443063, 833190.613495274], [331.75462790946233, -57.37860521003009, 0.20525849278177363], 2)">初始位置</button>
    </div>

    <div class="wearther">
        <label for="">时间线</label>
        <input type="range" min="0" max="1" step="0.01" value="0" @input="changeCurrentTime($event)">

        <label for="">云</label>
        <input type="range" min="0" max="1" value="0" step="0.01" @input="changeCloud($event)">

        <label for="">雨</label>
        <input type="range" min="0" max="1" value="0" step="0.01" @input="changeRain($event)">

        <label for="">雪</label>
        <input type="range" min="0" max="1" value="0" step="0.01" @input="changeSnow($event)">

        <label for="">大气</label>
        <input type="checkbox" value="true" @change="changeAtmosphere()">
    </div>

    <div class="tile">
        <button v-for="(item, index) in tileData" :key="item.id" @click="flyToById(item.id)">{{ item.name }}</button>
    </div>



</template>
<!-- 
    1. 创建dom元素用来加载视口
    2. 创建ESObjectManager对象管理器
    3. 创建视口对象
    4. 加载影像

 -->

<script setup>
import { ESObjectsManager, ESImageLabel, ESAlarm, ESPath, ESImageryLayer, ESTerrainLayer, ES3DTileset, ESPolygonFence, ESLocationMeasurement, ESDistanceMeasurement, ESHeightMeasurement, ESAreaMeasurement, ESDirectionMeasurement, ESHuman, ESGeoPolygon, ESPipeFence, ESApertureEffect, ESUnrealActor, ESPoi3D, ESPoi2D } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
import { PickedInfo } from 'xbsj-xe2/dist-node/xe2-base-objects';
import { ref, onMounted, onBeforeUnmount } from "vue"

/**
 * VUE3和EarthSDK2双向绑定
 */
import { createVueDisposer, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
const d = createVueDisposer(onBeforeUnmount);

const xe2Container = ref(null)
const objm = new ESObjectsManager()
//控制台
window.g_objm = objm

const follow = ref(false)
let humanArr = []

onMounted(() => {
    const dom = xe2Container.value;
    if (!dom) return;

    // 监听每个视口创建
    objm.viewerCreatedEvent.don((viewer) => {
        // 监听点击事件
        viewer.clickEvent.don(e => {
            if (e.screenPosition && follow.value) {
                viewer.pickPosition(e.screenPosition).then(position => {
                    humanArr.forEach(h => {
                        h.animation = "walking"
                        h.smoothMove(position, 5)
                    })
                })
            }
        })
        // 鼠标悬浮事件
        viewer.hoverEvent.don((e) => {
            viewer.pick(e.screenPosition, "hover").then(res => {
                console.log(res)
                if (res && res.sceneObject) {
                    res.sceneObject.show = false
                }
            })
        })
        // 鼠标移动事件
        viewer.mouseMoveEvent.don(e => {
            viewer.pick(e.screenPosition, "mouseMove").then(res => {

            })
        })



    })

    //创建一个cesium视口,并且绑定一个div容器
    const viewer = objm.createCesiumViewer(dom)

    // 监听视口状态
    viewer.statusChanged.don((val) => {
        if (val == 'Created') {
            // 视口加载成功，飞行到初始位置
            flyIn([114.79363796074749, 21.777714823443063, 833190.613495274], [331.75462790946233, -57.37860521003009, 0.20525849278177363], 2)
            // viewer.innerViewer.viewer.cesiumWidget._creditContainer.style.display = 'none'
        }
    })

    // json状态监听
    objm.jsonLoadingEvent.don((e) => {
        switch (e.type) {
            case "init":
                console.log("json加载初始化")
                break;
            case "loading":
                console.log("json正在加载")
                break;
            case "loaded":
                console.log("json加载完成")
                break;
            default:
                break;
        }
    })

    // 监听当前激活视口变化
    objm.activeViewerChanged.don((viewer) => {
        if (viewer && viewer.typeName == "ESUeViewer") {
            viewer.sunSkyControlled = true
        }
    })

    // ionAccessToken设置
    objm.activeViewer.ionAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MThmZGJiNi1kMDRlLTQ4ZGMtYjU0Ny0yNTljMjM1NzliN2MiLCJpZCI6MjU5LCJpYXQiOjE3MDkzMDQzNjZ9.7gsbNN-OaPZJ7QwMDB2vdF2geQDd8lMBAEK77_5Qol4"

    // 添加影像图层
    addImageLayer()

    // 加载3dtileset
    // init3Dtiles()

})

/**
 * 切换到Cesium视口
 */
const switchCesiumViewer = () => {
    const dom = xe2Container.value;
    if (!dom) return;
    objm.switchToCesiumViewer(dom)
}

/**
 * 切换到UE视口
 */
const switchUEViewer = () => {
    const dom = xe2Container.value;
    if (!dom) return;
    objm.switchToUEViewer(dom, "http://localhost:8086/", "demo")
}

/**
 * 加载地形图层
 */
const addTerrainLayer = () => {
    const sceneObj = objm.createSceneObject(ESTerrainLayer)
    if (!sceneObj) return
    sceneObj.url = "ion://1"
}

/**
 * 加载影像图层
 */
const addImageLayer = () => {
    const sceneObj = objm.createSceneObject(ESImageryLayer, "image123")
    if (!sceneObj) return
    sceneObj.url = "https://webmap.giiiis.com/maps/vt?lyrs=s&x={x}&y={y}&z={z}"
    sceneObj.zIndex = 4
}


/**
 * 任意切换在线影像
 */
const switchOnlineImage = ($event) => {
    /**
     * 1.获取一个影像图层
     * 2.设置图层的Url地址
     */
    const imageLayer = objm.getSceneObjectById("image123")
    if (!imageLayer) return
    imageLayer.url = $event.target.value
}


/**
 * 根据位置和姿态信息飞行定位
 */
const flyIn = (position, rotation, duration) => {
    objm.activeViewer.flyIn(position, rotation, duration)
}

/**
 * 时间线
 */

const changeCurrentTime = ($event) => {
    let startTime = 1710864010000
    let endTime = 1710950410000
    objm.activeViewer.currentTime = Number($event.target.value) * (endTime - startTime) + startTime
}

/**
 * 云
 */
const changeCloud = ($event) => {
    objm.activeViewer.cloud = Number($event.target.value)
}


/**
 * 雨
 */
const changeRain = ($event) => {
    objm.activeViewer.rain = Number($event.target.value)
}


/**
 * 雪
 */
const changeSnow = ($event) => {
    objm.activeViewer.snow = Number($event.target.value)
}


/**
 * 大气
 */
const changeAtmosphere = () => {
    objm.activeViewer.atmosphere = !objm.activeViewer.atmosphere
}


/**
 * 创建3DTileset
 */
const create3DTileset = () => {
    const tileset = objm.createSceneObject(ES3DTileset)
    if (!tileset) return
    tileset.url = "https://image.giiiis.com/shanghai/tileset.json"
    tileset.materialMode = "technology"
    tileset.editing = true
    window.tileset = tileset
    setTimeout(() => {
        tileset.flyTo()
    }, 2000)
}

// 3DTileset数据
const tileData = ref([
    {
        id: "tile1",
        name: "倾斜数据",
        url: "https://image.giiiis.com/dayanta/tileset.json"
    }, {
        id: "tile2",
        name: "白模数据",
        url: "https://image.giiiis.com/shanghai/tileset.json"
    }, {
        id: "tile3",
        name: "点云数据",
        url: "https://image.giiiis.com/dianyun/tileset.json"
    }, {
        id: "tile4",
        name: "BIM数据",
        url: "https://image.giiiis.com/bim/tileset.json"
    }, {
        id: "tile6",
        name: "管线数据",
        url: "https://www.pipeser.com/3dtiles/phipxrow1/tileset.json"
    }
])

/**
 * 初始化3DTileset数据
 */
const init3Dtiles = () => {
    tileData.value.forEach(item => {
        const tileset = objm.createSceneObject(ES3DTileset, item.id)
        if (tileset) {
            tileset.url = item.url
            tileset.czmTilesetReadyEvent.don((e) => {
                tileset.flyTo()
            })
        }
    })
}

/**
 * 3DTileset根据id飞行定位
 */
const flyToById = (id) => {
    const tileset = objm.getSceneObjectById(id)
    if (tileset) {
        tileset.flyTo()
    }
}



let measurementArr = []
/**
 * 点位测量
 */
const createESLocationMeasurement = () => {
    const sceneObj = objm.createSceneObject(ESLocationMeasurement)
    if (!sceneObj) return
    sceneObj.editing = true
    measurementArr.push(sceneObj)

}

/**
 * 距离测量
 */
const createESDistanceMeasurement = () => {
    const sceneObj = objm.createSceneObject(ESDistanceMeasurement)
    if (!sceneObj) return
    sceneObj.editing = true
    measurementArr.push(sceneObj)
}

/**
 * 高度测量
 */
const createESHeightMeasurement = () => {
    const sceneObj = objm.createSceneObject(ESHeightMeasurement)
    if (!sceneObj) return
    sceneObj.editing = true
    measurementArr.push(sceneObj)
}


/**
 * 面积测量
 */
const createESAreaMeasurement = () => {
    const sceneObj = objm.createSceneObject(ESAreaMeasurement)
    if (!sceneObj) return
    sceneObj.editing = true
    measurementArr.push(sceneObj)
}

/**
 * 方位角测量
 */
const createESDirectionMeasurement = () => {
    const sceneObj = objm.createSceneObject(ESDirectionMeasurement)
    if (!sceneObj) return
    sceneObj.editing = true
    measurementArr.push(sceneObj)
}

/**
 * 清除测量
 */
const destroyMeasurement = () => {
    measurementArr.forEach(item => {
        objm.destroySceneObject(item)
        item = undefined
    })
}


/**
 * 创建电子围栏
 */
const createESPolygonFence = ($event) => {
    const sceneObj = objm.createSceneObject(ESPolygonFence)
    if (!sceneObj) return
    sceneObj.materialMode = $event.target.value
    sceneObj.height = 30
    sceneObj.editing = true
    window.fence = sceneObj

}

/**
 * 创建路径
 * @param {*} $event 
 */
const createESPath = ($event) => {
    const sceneObj = objm.createSceneObject(ESPath)
    if (!sceneObj) return
    sceneObj.materialMode = $event.target.value
    // 开启线样式
    sceneObj.stroked = true
    // 设置线样式宽度
    sceneObj.strokeWidth = 10
    // 速度设置
    sceneObj.speed = 40

    sceneObj.editing = true

    window.path = sceneObj

}


/**
 * 创建报警
 * @param {*} $event 
 */
const createESAlarm = ($event) => {
    const sceneObj = objm.createSceneObject(ESAlarm)
    if (!sceneObj) return
    // 设置样式
    sceneObj.mode = $event.target.value
    // 设置半径
    sceneObj.radius = 100
    // 打开编辑状态
    sceneObj.editing = true

}

/**
 * 创建图片标签
 */
const createESImageLabel = () => {
    const sceneObj = objm.createSceneObject(ESImageLabel)
    if (!sceneObj) return
    sceneObj.editing = true;
    window.image = sceneObj

}

/**
 * 创建人员
 */
const createESHuman = ($event) => {
    const sceneObj = objm.createSceneObject(ESHuman)
    if (!sceneObj) return
    sceneObj.editing = true
    // 人员样式设置
    sceneObj.mode = $event.target.value
    humanArr.push(sceneObj)
}

/**
 * 创建贴地多边形
 */
const cerateESGeoPolygon = () => {
    const sceneObj = objm.createSceneObject(ESGeoPolygon)
    if (!sceneObj) return
    sceneObj.editing = true;
    sceneObj.filled = true
    sceneObj.fillColor = [1, 1, 1, 1]
    window.p = sceneObj
    sceneObj.pickedEvent.don((e) => {
        const result = PickedInfo.getFinalAttachedInfo(e)
        switch (result) {
            case 'hover':
                sceneObj.fillColor = [0, 1, 0, 1]
                break;
            case 'mouseMove':
                sceneObj.fillColor = [1, 1, 1, 1]
                break;
            default:
                sceneObj.fillColor = [1, 0, 0, 1]
                break;
        }
    })

}

/**
 * 管道电子围栏
 */
const createESPipeFence = ($event) => {
    const sceneObj = objm.createSceneObject(ESPipeFence)
    if (!sceneObj) return
    // 样式设置
    sceneObj.materialMode = $event.target.value
    // 编辑打开
    sceneObj.editing = true
}

/**
 * 光圈特效
 */
const createESApertureEffect = () => {
    const sceneObj = objm.createSceneObject(ESApertureEffect)
    if (!sceneObj) return
    // 打开编辑状态
    sceneObj.editing = true
    // 设置光圈半径
    sceneObj.radius = 500
    window.aperture = sceneObj
}
/**
 * 自定义UE的Actor
 */
const createESUnrealActor = () => {
    const sceneObj = objm.createSceneObject(ESUnrealActor)
    if (!sceneObj) return
    // 打开编辑状态
    sceneObj.editing = true
    // 设置资产路径
    sceneObj.actorClass = "/Script/Engine.Blueprint'/Game/Realistic_Starter_VFX_Pack_Vol2/Blueprints/Spawn_Particle.Spawn_Particle'"
    window.actor = sceneObj
}

const OffsetZ = () => {
    actor.callFunction('OffsetZ', {});
}

/**
 * 创建POI3D样式
 * @param {*} $event 
 */
const createESPoi3D = ($event) => {
    const sceneObj = objm.createSceneObject(ESPoi3D)
    if (!sceneObj) return
    // 开启编辑状态
    sceneObj.editing = true
    // 设置样式
    sceneObj.mode = $event.target.value
    // 文本名称
    sceneObj.name = '标注'
    window.poi3d = sceneObj

    // 设置样式自定义颜色
    sceneObj.style = {
        "text": "标注",// 标牌显示内容
        "UI_Color": [1, 0, 1, 1],// 标牌颜色
        "FX_Color": [1, 0, 0, 1] // 主体颜色
    }


}

const createESPoi2D = ($event) => {
    const sceneObj = objm.createSceneObject(ESPoi2D)
    if (!sceneObj) return
    // 开启编辑状态
    sceneObj.editing = true
    // 设置样式
    sceneObj.mode = $event.target.value
    // 文本名称
    sceneObj.name = '标注'
    window.poi2d = sceneObj
}













</script>

<style>
html,
body,
#app {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;

}

.switch {
    position: absolute;
    right: 10px;
    top: 80px;
}

.header {
    background: #141313;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
    min-width: 1800px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;

}

button {
    border: none;
    outline: none;
    cursor: pointer;
}


.header button {
    background: #141313;
    color: #ccc;
    height: 50px;
    line-height: 50px;
    padding: 0px 10px;
    box-sizing: border-box;
}

select {
    width: 100px;
    height: 28px;
    background: #141313;
    color: #ccc;
}



.switch>button {
    border-radius: 5px;
    color: #ccc;
    padding: 10px 20px;
    margin-right: 10px;
    background-color: rgb(0, 106, 255);
}

.wearther {
    width: 300px;
    height: 150px;
    background: #505050;
    color: #fff;
    position: absolute;
    right: 20px;
    top: 150px;
    display: grid;
    grid-template-columns: 80px 1fr;
    border-radius: 10px;
    padding: 10px;
    align-items: center;

}

.tile {
    position: absolute;
    left: 20px;
    top: 150px;
    display: flex;
    flex-direction: column;
}

.tile>button {
    border-radius: 5px;
    color: #ccc;
    padding: 10px 20px;
    margin-bottom: 10px;
    background-color: rgb(0, 106, 255);
}

.bind {
    width: 300px;
    background: #505050;
    color: #fff;
    position: absolute;
    right: 20px;
    top: 360px;
    border-radius: 10px;
    display: grid;
    padding: 20px 10px;
    grid-template-columns: 80px 1fr;
}

.mode {
    display: flex;
    align-items: center;
    padding-right: 10px;
    color: #ccc;
}

.mode::after {
    content: '';
    display: block;
    width: 1px;
    height: 20px;
    background-color: #ccc;
}

.mode>label {
    color: #ccc;
    font-size: 14px;
}

.mode>select {
    margin-right: 10px;
}

.mode>input {
    margin-right: 10px
}

.test {
    position: absolute;
    top: 100px;
    left: 200px;
    display: flex;
    flex-direction: column;
    color: #fff;
}

.test button {
    margin-bottom: 20px;
    color: rgb(0, 0, 0);
}
</style>